<template>
    <div>
      <div class="view">
        {{$t('message.global.group')}} : <el-tag class="tag">{{group}}</el-tag>
        {{$t('message.global.unit')}} : <el-tag class="tag">{{unit}}</el-tag>
        {{$t('message.global.version')}} : <el-tag class="tag">{{version}}</el-tag>
        {{$t('message.global.profile')}} : <el-tag class="tag">{{profile}}</el-tag>
      </div>
<!--      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label">{{$t('message.config.configDetail')}}</span>
          <div class="el-tabs-content">
            <show-code ref="code1" :versionId="versionId"></show-code>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('message.config.editConfig')">
          <div class="el-tabs-content">
            <edit-config :versionId="versionId" @update="onUpdateConfig"></edit-config>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('message.global.dependencies')">
          <div class="el-tabs-content">
            <dependencies-list :coordinate="coordinate"></dependencies-list>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('message.config.allConfig')">
          <div class="el-tabs-content">
            <show-code v-model="codeData"></show-code>
          </div>
        </el-tab-pane>
      </el-tabs>-->

      <div class="tabs">
        <div class="tab-area">
          <div @click="activeTag(0)" :class="{'tag-active' : tabIndex==0}" class="tab">{{$t('message.config.configDetail')}}</div>
          <div @click="activeTag(1)" :class="{'tag-active' : tabIndex==1}" class="tab">{{$t('message.config.editConfig')}}</div>
          <div @click="activeTag(2)" :class="{'tag-active' : tabIndex==2}" class="tab">{{$t('message.global.dependencies')}}</div>
          <div @click="activeTag(3)" :class="{'tag-active' : tabIndex==3}" class="tab">{{$t('message.config.allConfig')}}</div>
        </div>

        <div class="div-content">
          <div v-show="tabIndex == 0">
            <show-code ref="realCode" :versionId="versionId"></show-code>
          </div>

          <div v-show="tabIndex == 1">
            <edit-config ref="editCode" :versionId="versionId" @update="onUpdateConfig"></edit-config>
          </div>


          <div v-show="tabIndex == 2">
            <dependencies-list :coordinate="coordinate" :versionId="versionId"></dependencies-list>
          </div>

          <div v-show="tabIndex == 3">
            <global-code :coordinate="coordinate"></global-code>
          </div>
        </div>
      </div>



    </div>
</template>

<script>

    import ShowCode from "../component/Code.vue";
    import EditConfig from "../component/editConfig.vue";
    import DependenciesList from "../component/DependenciesList.vue";
    import GlobalCode from "../component/GlobalCode.vue";

    export default {
      components: {
        GlobalCode,
        DependenciesList,
        EditConfig,
        ShowCode},
      directives : {
        show : function(el,binding){
            if(binding.value){
              el.style.display = 'block';
            }else{
              el.style.display = 'none';
            }
          }
      },
      name: "config-detail",
        data : function(){
          return {
            codeData : {}, // source config data
            versionId : "",
            group : '',
            unit : '',
            version : '',
            profile : '',
            coordinate : {},
            tabIndex : 0
          };
        },
        methods : {
          onUpdateConfig(){
            this.$refs['realCode'].loadData();
          },
          activeTag(index){
            this.tabIndex = index;
            if(index == 0){
              this.$refs.realCode.renderLanguageStyle();
            }
          },
          resolve : function(){
            this.group = this.$route.query.group;
            this.unit = this.$route.query.unit;
            this.version = this.$route.query.version;
            this.profile = this.$route.query.profile;
            this.versionId = this.$route.query.versionId;

            this.coordinate['group'] = this.group;
            this.coordinate['unit'] = this.unit;
            this.coordinate['version'] = this.version;
            this.coordinate['profile'] = this.profile;
          }
        },
        watch : {
          '$route' : function(){
            this.resolve();
            this.tabIndex = 0;
          }
        },
        mounted : function(){
          this.resolve();
        }
    }
</script>

<style scoped>
  .view{padding: 10px 10px 10px 1rem;
    background-color: #f5f7fa;border:1px solid #d4c8c8;border-radius: 5px;margin-bottom: 1rem;}
  .tag{margin-right: 20px;}
  .el-tabs-content{min-height: 500px !important;}
  .hide{display: none;}

  .tabs{margin:0 auto;background: #fff;border: 1px solid #dcdfe6;    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);margin-top:10px;}
  .tab{padding: 0 20px;height: 40px;box-sizing: border-box;line-height: 40px;display: inline-block;list-style: none;font-size: 14px;font-weight: 500;color: #909399;    border: 1px solid transparent;cursor: pointer;}
  .tab:hover{color: #409EFF}
  .tag-active{    color: #409EFF;background-color: #fff;border-right-color: #dcdfe6;border-left-color: #dcdfe6;}
  .tab-area{display: flex;flex-direction: row;    background-color: #f5f7fa;border-bottom: 1px solid #e4e7ed;}
  .div-content{min-height: 500px;padding:10px;}

</style>
